<template>
  <div id="bar">
    柱状图
  </div>
</template>
<script>
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart, LineChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
  LineChart
])
export default {
  mounted() {
    var chartDom = document.getElementById('bar')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      color: ['#4671c6', '#ffc655', '#7cce7a'],
      title: {
        text: '价格数量分布'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['公寓', '别墅', '商铺']
      },
      toolbox: {
        show: true,
        orient: 'horizontal',
        left: 'right',
        top: 'top',
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      grid: {
        top: 60,
        bottom: 30,
        left: '14%',
        right: '10%'
      },
      xAxis: [
        {
          type: 'category',
          name: '(元)',
          axisTick: { show: true },
          offset: 10,
          data: ['1000', '2000', '3000', '4000', '5000']
        }
      ],
      yAxis: [
        {
          type: 'value',
          //   name: '？',
          min: 0,
          max: 70,
          interval: 10,
          axisTick: { show: false }
          // data: ['10', '20', '30', '40', '50','60','70']
        }
      ],
      series: [
        {
          name: '商铺',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          data: [10, 22, 55, 65, 3]
        },
        {
          name: '别墅',
          type: 'bar',
          emphasis: {
            focus: 'series'
          },
          data: [2, 5, 13, 75, 33]
        },
        {
          name: '公寓',
          type: 'bar',
          barGap: 0,
          emphasis: {
            focus: 'series'
          },
          data: [65, 45, 55, 33, 10]
        }
      ]
    }

    option && myChart.setOption(option)
    window.addEventListener('resize', function() {
      myChart.resize()
    })
  }
}
</script>
<style scoped>
  #bar{
    height: 300px;

}
</style>
